<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>武大讲座信息</title>
    <meta name="describe" content="获取武大校内爬虫信息">
    <meta name="time" content="2017.3.4">
    <meta name="author" content="Shijie Liu & Wenhui Tang">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
        var i = 0;
        var times;
        //
        //通用Ajax
        var xmlhttp;
        function loadXML(url,func)
        {
            if (window.XMLHttpRequest)
            {
                xmlhttp=new XMLHttpRequest();  // code for IE7+, Firefox, Chrome, Opera, Safari
            }
            else
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  // code for IE6, IE5
            }
            xmlhttp.onreadystatechange = func;
            xmlhttp.open("GET",url,true);
            xmlhttp.send();
        }

        //数组大小
        function getTimes()
        {
            loadXML("server/ajax_data.php?id=len",function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    times =  parseInt(xmlhttp.responseText);
                }
            });
        }
        getTimes();  //执行一次函数，改变全局变量的值

        //ajax发送请求并显示
        function loadXMLDoc()
        {
            var xmlhttp;
            if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();    // code for IE7+, Firefox, Chrome, Opera, Safari
            }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   // code for IE6, IE5
            }
            xmlhttp.onreadystatechange = function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    var lec_str = xmlhttp.responseText;
                    if(lec_str == ""){
                        lec_str = "0#无#无#无";
                    }
                    var lec_info = lec_str.split("#");
                    add_lect(lec_info[0],lec_info[1],lec_info[2],lec_info[3]);
                }
            }

            if (i < times){
                xmlhttp.open("GET","server/ajax_data.php?id="+i,true);
                xmlhttp.send();

                setTimeout("loadXMLDoc()",100);
                i++;

                var pero = parseInt(i / times * 100);  //进度条
                setProgress(pero);

            }else {
                return;
            }
        }

        //动态生成行数据
        function add_lect(id,title,date,url) {
            var row = document.createElement("tr");   //创建行
            var td1 = document.createElement("td");
            var td2 = document.createElement("td");
            var td3 = document.createElement("td");
            var td4 = document.createElement("td");
            var a_url = document.createElement("a");
            td1.appendChild(document.createTextNode(id));   //为单元格添加内容
            td2.appendChild(document.createTextNode(title));
            td3.appendChild(document.createTextNode(date));
            a_url.appendChild(document.createTextNode(url));
            a_url.setAttribute("href",url);
            a_url.setAttribute("target","_blank");
            td4.appendChild(a_url);
            row.appendChild(td1); //将单元格添加到行内
            row.appendChild(td2);
            row.appendChild(td3);
            row.appendChild(td4);
            document.getElementById("lec_table").appendChild(row); //将行添加到<tbody>中
        }

        //  获取讲座信息
        function getLects() {
            loadXMLDoc();
        }

        //清除当前页
        function reloadPage(){
            window.location.reload();
		}

		function setProgress(percent) {
            var pros = document.getElementById("pros");
            pros.setAttribute("style","width:"+percent+"%");
            pros.innerHTML = percent+"%";
        }

	</script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span12">
            <h3 class="text-center" style="font:normal 32px 黑体">
                讲座信息爬虫
            </h3>
        </div>
    </div>
    <div class="row" id="control">
<!--        <div class="span8">-->
            <div class="btns col-lg-6">
                <div class="span6">
                    <button class="btn btn-large" type="button" onclick="getLects()"><strong>开始</strong></button>
                </div>
                <div class="span6">
                    <button class="btn btn-large" type="button" onclick="reloadPage()"><strong>清除</strong></button>
                </div>
                <!--<div class="bar" id="status">爬虫状态：进行中</div>-->
            </div>
        <div class="status">
            <div class="progress">
                <div id="pros" class="progress-bar" role="progressbar" aria-valuenow="60"
                     aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                </div>
            </div>
            <span>运行状态</span>
        </div>

    </div>
<!--    </div>-->
    <div class="row">
        <div class="span12">
            <table class="table table-striped">
                <thead>
	                <tr>
	                    <th width="50px">编号</th>
	                    <th width="250px" style="text-align: center">讲座标题</th>
	                    <th width="90px">发布时间</th>
	                    <th width="300px" style="text-align: center">URL</th>
	                </tr>
                </thead>
                <tbody  id="lec_table">
	                <!--<tr>-->
	                    <!--<td>1</td>-->
	                    <!--<td id="clear">武汉大学第四届国际交叉学科论坛诚邀海内外青年才俊</td>-->
	                    <!--<td>2017-3-12</td>-->
	                    <!--<td><a href="http://www.whu.edu.cn/info/1118/7084.htm" target="_blank">http://www.whu.edu.cn/info/1118/7084.htm###############################################</a></td>-->
	                <!--</tr>-->
                </tbody>
            </table>
        </div>
    </div>

</div>
</body>
</html>